import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, DatePicker, Form, Icon, Radio} from "antd";
import {query} from "./actions";
import FilterForm from "../../components/FilterForm";
import moment from "moment";
import {getCurrentOrganization, getLastFilter, saveLastFilter} from "../../lib/identity";
import {DATE_FORMAT} from "../../lib/func";
import locale from "antd/lib/date-picker/locale/zh_CN";

const {RangePicker} = DatePicker;

const LAST_FILTER = "profileAnal";

class Filter extends PureComponent {
    state = {
        "year": moment().year().toString(),
        type: '1',
        monthValue: [],
        mode: ['month', 'month'],
        createTimeRange: [moment().startOf('month'), moment().endOf('month')]
    };
    handleSearch = (values) => {
        const {dispatch} = this.props;
        const type = this.state.type;
        if ('1' === type) {
            this.setState({...values});
            saveLastFilter(LAST_FILTER, {...values});
            dispatch(query({...values, type: '1', "organizationId": getCurrentOrganization()}));
        } else if ('3' === type) {
            const fields = {};
            this.setState({...values});
            if (values.createTimeRange && values.createTimeRange.length > 1) {
                fields.createTimeStart = values.createTimeRange[0].format(DATE_FORMAT);
                fields.createTimeEnd = values.createTimeRange[1].format(DATE_FORMAT);
                saveLastFilter(LAST_FILTER, {...fields});
                dispatch(query({...fields, type: '3', "organizationId": getCurrentOrganization()}));
            }
        }
    };

    changeYear = value => {
        this.setState({year: value});
    };

    onChangeType = e => {
        this.setState({
            type: e.target.value
        });
    };

    handlePanelChange = (value, mode) => {
        this.setState({
            monthValue: value, mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
        });
    };


    handleSearchV2 = () => {
        const {dispatch} = this.props;
        const monthValue = this.state.monthValue;
        const fields = {};
        if (monthValue.length > 1) {
            fields.createTimeStart = monthValue[0].startOf('month').format(DATE_FORMAT);
            fields.createTimeEnd = monthValue[1].endOf('month').format(DATE_FORMAT);
        }
        saveLastFilter(LAST_FILTER, {...fields});
        dispatch(query({...fields, type: "2", "organizationId": getCurrentOrganization()}));
    };

    render() {
        const {loading} = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        const yearList = [];
        yearList.push({'label': '2020', 'value': "2020"});
        yearList.push({'label': '2021', 'value': "2021"});
        yearList.push({'label': '2022', 'value': "2022"});
        yearList.push({'label': '2023', 'value': "2023"});
        yearList.push({'label': '2024', 'value': "2024"});
        yearList.push({'label': '2025', 'value': "2025"});
        yearList.push({'label': '2026', 'value': "2026"});
        const filterSchema = [{
            key: 'year', field: 'year', type: 'listSelector', expandable: true, title: '班列/提货年份', fieldOptions: {
                initialValue: this.state.year || fields.year
            }, controlProps: {
                dataSource: yearList, onChange: this.changeYear
            }
        }];
        const filterSchemaDay = [{
            key: 'createTimeRange',
            field: 'createTimeRange',
            type: 'dateRangePicker',
            expandable: true,
            title: '班列/提货日期',
            placeholder: ['开始日期', '结束日期'],
            fieldOptions: {
                initialValue: this.state.createTimeRange || fields.createTimeRange
            }
        }]

        return (<div>
            <Radio.Group defaultValue={this.state.type} onChange={this.onChangeType} buttonStyle="solid">
                <Radio.Button value="1">选择年份</Radio.Button>
                <Radio.Button value="2">选择月份</Radio.Button>
                <Radio.Button value="3">选择日期</Radio.Button>
            </Radio.Group>
            {this.state.type === '1' &&
                <FilterForm schema={filterSchema} callback={this.handleSearch} loading={loading}/>}
            {this.state.type === '2' && <div style={{margin: '5px'}}>
                班列/提货月份: <RangePicker
                placeholder={['开始月份', '结束月份']}
                format="YYYY-MM"
                locale={locale}
                value={this.state.monthValue}
                mode={this.state.mode}
                onPanelChange={this.handlePanelChange}
            /><Button style={{marginLeft: "15px"}} onClick={this.handleSearchV2} type="primary"
                      disabled={loading}>
                <Icon type="search"/>搜索
            </Button></div>}
            {this.state.type === '3' &&
                <FilterForm schema={filterSchemaDay} callback={this.handleSearch} loading={loading}/>}
        </div>);
    }
}

const mapStateToProps = state => {
    return {
        ...state.profitAnal.list
    };
};

export default connect(mapStateToProps)(Form.create()(Filter));
